<template>
  <!-- 筛选区 -->
  <div class="sub-filter" v-if="list.length">
    <div class="item" v-for="item in list" :key="item.id">
      <div class="head">{{ item.name }}</div>
      <div class="body">
        <a
          href="javascript:;"
          :class="{ active: item.activeName === undefined }"
          @click="getArrFn(item, {})"
          >全部</a
        >
        <a
          href="javascript:;"
          @click="getArrFn(item, obj)"
          :class="{ active: item.activeName === obj.name }"
          v-for="obj in item.properties"
          :key="obj.id"
        >
          {{ obj.name }}
        </a>
      </div>
    </div>
  </div>
  <div class="sub-filter" v-else>
    <XtxSkeleton
      v-for="i in 4"
      :key="i"
      class="item"
      width="800px"
      height="40px"
    ></XtxSkeleton>
  </div>
</template>

<script>
import { computed, inject, reactive, toRef, watch } from 'vue'
import XtxSkeleton from '@/components/library/xtx-skeleton.vue'
import { useRoute } from 'vue-router'
export default {
  components: { XtxSkeleton },
  name: 'SubFilter',
  setup () {
    const category = inject('category')
    const sortParams = inject('sortParams')
    // 用计算属性,监听category.value.brands数据变化,修改品牌
    const brandItem = computed(() => category.value.brands)
    // 💥问题修复：把品牌也定义成响应式数据，否则视图更新不同步
    const brands = reactive({ id: null, name: '品牌', properties: brandItem })
    // 把品牌和筛选条件放到了同一个数组内
    const list = computed(() => [
      // 仿写一个品牌数据 - 后端是独立出来的一个字段，为了列表渲染更加方便，我们把数据合并到属性中
      brands,
      ...category.value.saleProperties
    ])
    const route = useRoute()
    // 监听路由id的变化,修改品牌的活名
    watch(() => route.params.id, () => {
      brands.activeName = undefined
    })
    // 要修改 sortParams里的attrs的属性值
    // [{ groupName: xx, propertyName: xx },{ groupName: xx, propertyName: xx }]
    const attrs = toRef(sortParams, 'attrs')
    const brandId = toRef(sortParams, 'brandId')
    const getArrFn = (theItem, theObj) => {
      // 🔔 点击的时候获取属性名称，并通过 :class 绑定实现高亮
      theItem.activeName = theObj.name
      // console.log(theItem) // 属性组
      // console.log(theObj) // 点击的对象
      // 点击的是品牌
      if (theItem.name === '品牌') {
        brandId.value = theObj.id
        return
      }
      // 筛选时同一属性组只能有一个属性名
      // 点击的时候有两种种情况：
      // 点击过了,属性组名相同,直接修改属性名,没点击过,属性组名不同,追加数据
      const index = attrs.value.findIndex(item => item.groupName === theItem.name)
      // 情况1：当前属性组没有被点击过，就添加一份新的属性数据
      if (index === -1) {
        attrs.value.push({ groupName: theItem.name, propertyName: theItem.activeName })
      } else {
        // 情况2：已经有属性字段了，根据下标修改值属性名
        attrs.value[index].propertyName = theItem.activeName
      }
      // 🔔过滤去除一些无效值
      attrs.value = attrs.value.filter(item => item.propertyName)
    }
    return { list, getArrFn }
  }
}
</script>

<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
  .xtx-skeleton {
    padding: 10px 0;
  }
}
</style>
